<template>
	
	<view class="content">
		<uamhead :title="title" ></uamhead>
		<scroll-view scroll-y="true" >
			 <view class="skeleton">
			        <m-for-skeleton
			        :avatarSize="200"
			        :row="3"
					:title="false"
			        :loading="loading"
			        :isarc="key%2==0?'circular':'square'"
					:titleStyle="{}"
			        v-for="(item,key) in 10"
			        :key="key">
			        <view>asdas</view>
			        </m-for-skeleton>
			        <button type="primary" @click="hide" size="mini"></button>
			    </view>
			<view class="index-list" v-for="(item,index) in playlist"
			 :key="index" @click="handleNavtoList(item.id)">
			<view title="" note="" class="index-list-item">
			<view  class="index-list-img">
		<image :src="item.coverImgUrl"></image>
		<text >{{item.updateFrequency}}</text>
		</view>
		<view class="index-list-text">
			<view v-for="(musicItem,index) in item.tracks" :key="index">
				{{index+1}}.{{musicItem.first}}-{{musicItem.second}}
			</view>
				</view>
			</view>
		</view>
	</scroll-view>

	</view>
</template>

<script>
	import { topList } from'../../common/api.js';
	import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
	export default {
		data() {
			return {
				playlist:[],
				title: '全部榜单',
				loading:true,
			}
		},
		onLoad() {
			topList().then((res)=>{
				setTimeout(()=>{
			this.playlist=res.data.list.slice(0,4);	
			this.loading=false;},1100)
		});
		
		},
		methods: {
		// handleNavtoList(id){
		// 	uni.navigateTo({
		// 	url:'/pages/list/list?listid='+id,	
		// 	});
		// }
		handleNavtoList(id) {
						uni.navigateTo({
							url: '/pages/list/list?listid=' + id,
						});
					}
		}
	}
</script>

<style>
	.title-a{height: 35rpx;width: 35rpx;}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 212rpx;
		width: 212rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.index-list{margin: 30rpx 30rpx 30rpx 30rpx;width: 95%;}
	.index-list-item{display: flex;margin-bottom: 35rpx;}
	.index-list-img{width: 212rpx;height: 212rpx;margin-right: 20rpx;
	border-radius:15rpx ;overflow: hidden;}
	.index-list-img image{width: 100%;height: 100%;}
	.index-list-img text{position: absolute;font-size: 22rpx;
	color: white;bottom:35rpx ;left: 40rpx;}
	.index-list-text{flex: 1;font-size: 24rpx ;color:pink;line-height: 68rpx;}
	.index-list-text view{}
	
</style>
